<template>
  <div class="page_xxx">
    <form action="" class="login column center" @submit="submit">
      <div class="name flex start">
        <label for="">登录名</label>
        <input class="flex1" type="text" name="name" id="" />
      </div>
      <div class="password flex start">
        <label for="">密码</label>
        <input class="flex1" type="password" name="password" id="" />
      </div>
      <div class="yanzhen tcenter" id="yanzhen">
        <div class="text" v-if="yanzhenLoad">准备验证中</div>
      </div>
      <input type="submit" value="登陆" />
    </form>
  </div>
</template>

<script>
import { post, get } from "@js/api";
import utils from "@js/utils.js";
// import Rsa from 'node-rsa';
import crypto2 from 'crypto';
// import xxx from '@com/xxx.vue';
import "@js/gt.js";

export default {
  data() {
    return {
      yanzhen: null,
      challenge: "",
      gt: "",
      key: "",
      yanzhenLoad: true,
    };
  },
  computed: {},
  created() {
    this.getYanzhen();
  },
  methods: {
    async getYanzhen() {
      let t = this;

      let res = await get("/web/captcha/combine", {
        plat: 6,
      });
      if (res.code != 0) return console.warn("error  getyanzhen", res);

      let gt = res.data.result.gt,
        challenge = res.data.result.challenge,
        key = res.data.result.key;
      console.log(gt, challenge, key, 990);
      t.key = key;
      t.gt = gt;
      t.challenge = challenge;
      //
      var handler = function name(html) {
        t.yanzhenLoad = false;
        html.appendTo("#yanzhen");
        t.yanzhen = html;
      };
      initGeetest(
        {
          // 以下 4 个配置参数为必须，不能缺少
          gt: gt,
          challenge: challenge,
          offline: false, // 表示用户后台检测极验服务器是否宕机
          new_captcha: true, // 用于宕机时表示是新验证码的宕机

          product: "popup", // 产品形式，包括：float，popup
          width: "300px",
          https: true,

          // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
        },
        handler
      );
    },
    async encodePw(password){

      //api获取公钥
      let res = await get('/login?act=getkey')
      if(!res) return console.warn("error api encode");
      let {hash,key} = res,temp=`${hash}${password}`;
      console.log(password,111,hash)
      let str = crypto2.publicEncrypt(key, Buffer.from(temp, 'utf8')).toString('base64');
      console.log(temp,222,key,str)
      return str;
    },
    async submit(e) {
      let t =this;
      e.preventDefault();
      let data = utils.getSubmitData(e);
      let res = t.yanzhen.getValidate();
      let password = await t.encodePw(data.password);
      if (!res) return console.warn("请先验证");
      post("/web/login/v2", {
        captchaType: 6,
        username: data.name,
        password: password,
        keep: true,
        key: t.key,
        challenge: res.geetest_challenge,
        validate: res.geetest_validate,
        seccode: res.geetest_seccode,
      }).then((res) => {
        console.log(res, 777);
      });
    },
    isPassYanzhen() {
      post("");
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped >
@import "@css/mixin";
.page_xxx {
  .login {
    .name,
    .password {
      label {
        display: inline-block;
        width: 70px;
      }
    }
    .yanzhen {
      @include box(300px, o, auto);
      @include font(o, #777, 3);
      background-color: #eee;
    }
    > * {
      @include box(o, o, 10px 0);
    }
  }
}
</style>